<template>
	<view class="data-range">
		<view class="search_btn color-tip" @click="search"><text class="iconfont iconsousuo"></text></view>
		<picker mode="date" @change="bindStartDateChange" class="start">
			<view class="uni-input font-size-tag">{{ dateObj.startDate ? dateObj.startDate : '开始时间' }}</view>
		</picker>
		<text class="">-</text>
		<picker mode="date" @change="bindEndDateChange" class="end">
			<view class="uni-input font-size-tag">{{ dateObj.endDate ? dateObj.endDate : '结束时间' }}</view>
		</picker>
		<view class="search_btn color-tip" @click="clearTime"><text class="iconfont iconqingkong1"></text></view>
	</view>
</template>

<script>
	export default {
		props:{
			onChange:{
				type:Function,
				validator: () => {
					return ()=>{}
				}
			}
		},
		name:"date-range",
		data() {
			return {
				dateObj:{
					startDate:'',
					endDate:''
				}
			};
		},
		methods:{
			search(){},
			bindStartDateChange(e) {
				const {endDate} = this.dateObj;
				if(this.getTimeStamp(e.detail.value)>this.getTimeStamp(endDate)){
					uni.showToast({
						icon:'none',
						title:'开始时间不能大于结束时间'
					})
					return false;
				}
				this.dateObj.startDate = e.detail.value;
				this.$emit('onChange',this.dateObj)
			},
			bindEndDateChange(e) {
				const {startDate} = this.dateObj;
				if(this.getTimeStamp(startDate)>this.getTimeStamp(e.detail.value)){
					uni.showToast({
						icon:'none',
						title:'开始时间不能大于结束时间'
					})
					return false;
				}
				this.dateObj.endDate = e.detail.value;
				this.$emit('onChange',this.dateObj)
			},
			getTimeStamp(timestr){
				if(timestr){
					timestr = timestr.replace(/-/g,'.');
					return Date.parse(new Date(timestr))
				}
				return Date.parse(new Date())
			},
			//清空时间
			clearTime(){
				this.dateObj.startDate = '';
				this.dateObj.endDate = '';
			}
		}
	}
</script>

<style lang="scss">
.iconfont {
	font-size: 32rpx;
}
	
.data-range {
	box-sizing: border-box;
	padding: 0 30rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 690rpx;
	height: 72rpx;
	background: #F8F8F8;
	border-radius: 36rpx;
}
</style>
